<template>
  <div class="audio-detail flex-col" :class="isWx ? 'h100' : 'vh100'">
    <div class="header-remark por ovh">
      <div class="bg-blur poa w100 h100 zi0" :style="{backgroundImage: `url(${courseInfo.bigimg})`}"></div>
      <div class="bg-color flex zi1 por">
        <img :src="courseInfo.bigimg" alt="" class="book vam">
        <div class="text-detail flex-col jcb flex-1 lh1 bsb">
          <div class="">
            <div class="header-name">{{courseInfo.name}}</div>
            <div class="header-teacher dib vat">主讲：{{courseInfo.teacher_name || '格灵课堂'}}</div>
          </div>
          <div class="header-other flex jcb aic">
            <div class="header-count">
              <img src="../../images/audio/audio_detail_ico_08.png" alt="" class="header-res-ico clock vam"/><span
              class="vam">{{courseInfo.resources_count}}课时</span>
              <img src="../../images/audio/audio_detail_ico_11.png" alt="" class="header-res-ico eye vam"/><span
              class="vam">{{courseInfo.hits}}人在学</span>
            </div>
            <div class="header-ctrl">
              <img :src="icons[+courseInfo.is_collection]" alt="" class="header-ico coll vam" @click="collecting"/>
              <img src="../../images/audio/audio_detail_ico_05.png" alt="" class="header-ico share vam" @click="share"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabs ovh zi1">
      <van-tabs :ellipsis="false"
                v-model="activeTabs"
                color="#ff850b"
                @click="toggleTabs">
        <van-tab :title="item.name" v-for="item in tabs" :key="item.id">
        </van-tab>
      </van-tabs>
    </div>
    <div class="page-content flex-1 ova">
      <van-list class="page-res-list" v-model="loading" v-if="!activeTabs"
                :finished="finished"
                :offset="20"
                finished-text="没有更多了!"
                @load="loadMore">
        <!-- 目录 -->
        <div class="res-item flex aic jcb" v-for="(item, i) in resList" :key="i">
          <div class="res-item-num" :class="isWx + ''">mp3</div>
          <div class="res-item-inner flex jcb aic" :class="{active: currAudio === item.id}" @click="pushAudio(item)">
            <div class="name wot1">{{item.name}}</div>
            <vip-tip vip-background="linear-gradient(90deg, #ffd870, #eab33c)"
                     background="linear-gradient(90deg, #0cdaf4, #14c4fa)"
                     v-show="!userInfo.is_vip && courseInfo.is_free !== 1"
                     free-text="试听" :is-vip="!item.is_free && !item.is_pay" class="vip-tips vam"></vip-tip>
          </div>
        </div>
      </van-list>
      <div class="page-book-detail lh1" v-else>
        <!-- 介绍 -->
        <div class="df-title">课程简介</div>
        <div class="remark wspl">{{courseInfo.remark || '暂无简介'}}</div>
        <div class="df-title">为你推荐</div>
        <div class="recommend-list">
          <course-card :item="item" v-for="(item, i) in recommend" :key="i"
                       :is-wx="isWx"
                       @click-callback="$router.push('/audiodetail/' + item.id)"></course-card>
        </div>
        <detail-tip :tips-list="tipsList"></detail-tip>
      </div>
    </div>
    <div class="poa w100 h100 l0 t0 share-tip zi10" v-show="shareTips" @click="share">
      <img src="../../images/audio/share_tips.png" alt="" class="w100 vat">
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    name: 'AudioDetail',
    computed: {
      ...mapGetters(['userInfo', 'productInfo', 'currAudio', 'hasAudio', 'isWx'])
    },
    data() {
      return {
        tipsList: [
          '如有其它疑问，可拨打客服电话：{{phone}}，或添加客服微信：{{phone}}，进行咨询。',
          '查看更多精品课程，请扫描下方二维码关注我们。'
        ],
        shareObj: {},
        shareUrl: '',
        shareTips: false,

        loading: false,
        finished: false,
        lockGet: true,
        curr: 1,
        limit: 10,

        cid: '',
        icons: [
          require('../../images/audio/audio_detail_ico_03.png'),
          require('../../images/audio/audio_detail_ico_03_act_03.png')
        ],

        activeTabs: 0,
        tabs: [
          { name: '目录', id: 0 },
          { name: '介绍', id: 1 }
        ],

        courseInfo: {},
        resList: [],

        recommend: []
      };
    },
    watch: {
      $route(now, old) {
        // this.initPage();
        location.reload();
      }
    },
    created() {
      if (!this.hasAudio) {
        return this.$router.replace('/notchannel');
      }
      this.initPage();
      this.util.setWxConfig(['updateAppMessageShareData', 'updateTimelineShareData']).catch(console.log);
    },
    methods: {
      initPage() {
        this.cid = this.$route.params.cid;
        this.shareUrl = this.util.makeShareLink();

        this.getInfo();
        this.getRecommend();
        this.getResList(true);
      },
      loadMore() {
        if (this.lockGet) return;
        this.lockGet = true;
        this.curr++;
        this.getResList();
      },
      toggleTabs(tab) {
        // console.log(tab);
      },
      getInfo() {
        let { userInfo, productInfo, cid } = this;
        this.http.$post('api/resource.course/get_jd_course_detail', {
          uid: userInfo.uid,
          product_id: productInfo.product_id,
          course_id: cid
        }).then(res => {
          res.name = res.name.split(/[:：]/);
          res.name = res.name[1] || res.name[0];
          this.courseInfo = res;
          this.shareObj = {
            title: res.name,
            desc: `我正在学习${res.name}，老师讲得很好，通俗易懂，裂墙推荐！`,
            imgUrl: res.bigimg,
            link: this.shareUrl,
            success: () => {
              // 设置成功
              // this.$toast.success('分享成功');
            }
          };
          wx.ready(() => {
            wx.updateAppMessageShareData(this.shareObj);
            wx.updateTimelineShareData(this.shareObj);
          });
          if (this.courseInfo.status === 2) {
            return this.$dialog.alert({
              message: '本音频还在录制中，先看看别的课程吧',
              confirmButtonText: '我知道了'
            });
          }
        }).catch(this.$err);
      },
      getRecommend() {
        this.http.$post('api/resource.course/get_course_after', {
          uid: this.userInfo.uid,
          product_id: this.productInfo.product_id,
          course_id: this.cid,
          module_id: 343
        }).then(res => {
          this.recommend = res.list.map(e => {
            e.hits = e.hits_total;
            e.name = e.name.split(/[:：]/);
            e.name = e.name[1] || e.name[0];
            return e;
          });
        }).catch(this.$err);
      },
      share() {
        this.shareTips = !this.shareTips;
      },
      collecting() {
        this.http.$post('api/user/save_course_collection', {
          uid: this.userInfo.uid,
          course_id: this.cid,
          ...this.productInfo
        }).then(res => {
          this.courseInfo.is_collection = +!this.courseInfo.is_collection;
          this.$toast.success(this.courseInfo.is_collection ? '收藏成功' : '取消收藏成功');
        }).catch(this.$err);
      },
      getResList(init) {
        if (init === true) {
          this.curr = 1;
          this.total = 0;
          this.resList = [];
        }
        let { userInfo, productInfo, cid, curr, limits } = this;
        this.http.$post('api/resource.resources_jd/get_resources_list', {
          uid: userInfo.uid,
          product_id: productInfo.product_id,
          course_id: cid,
          curr,
          limits
        }).then(res => {
          this.resList.push(...res.list.map(e => {
            e.name = e.name.split(/[:：]/);
            e.name = e.name[1] || e.name[0];
            return e;
          }));
          this.total = res.total;
        }).catch(err => {
          +err.code === 404 || this.$err(err);
        }).finally(() => {
          this.lockGet = false;
          this.loading = false;
          setTimeout(() => {
            this.finished = this.total <= this.resList.length;
          }, 200);
        });
      },
      pushAudio(item) {
        if (this.courseInfo.status === 2) {
          return this.$dialog.alert({
            message: '本音频还在录制中，先看看别的课程吧',
            confirmButtonText: '我知道了'
          });
        }
        this.util.goToPlay(item, () => {
          this.$router.push({
            name: 'PlayAudio',
            params: {
              cId: item.course_id,
              rId: item.id,
              rName: item.name
            }
          });
        });
      }
    }
  };
</script>

<style scoped lang="less">
  .audio-detail {
    .share-tip {
      background-color: rgba(0, 0, 0, .7);
    }

    .tabs {
      margin-top: -.62rem;
      border-radius: .38rem .38rem 0 0;
    }

    /deep/ .van-tabs {
      .van-tab {
        flex: .15;
        font-size: .94rem;
      }
    }
    .header- {
      &remark {
        .bg-blur {
          background: no-repeat left 33%;
          background-size: 100%;
          filter: blur(2.5rem);
        }
        .bg-color {
          padding: 1.25rem .94rem 1.88rem 1.25rem;
          background-color: rgba(168, 104, 40, .7);
          > :nth-child(n) {
            height: 6.88rem;
          }
        }
      }
      &name {
        margin-bottom: .75rem;
        font-size: 1.13rem;
      }
      &teacher {
        padding: 0 .5rem;
        line-height: 1.13rem;
        background-color: rgba(58, 30, 2, .4);
        color: #dbb085;
        font-size: .69rem;
        border-radius: .13rem;
      }
      &other {
        font-size: .69rem;
        color: rgba(255, 255, 255, .6);
        .clock {
          margin-right: .28rem;
          width: .75rem;
        }
        .eye {
          margin: 0 .31rem 0 .59rem;
          width: .91rem;
        }
      }
      &ico {
        width: 1.75rem;
        height: 1.75rem;
        &:not(:last-child) {
          margin-right: .5rem;
        }
      }

    }

    .page-content {
      background-color: #fff;
    }

    .page-res-list {
      padding: 0 1rem 0 .94rem;
    }
    .res-item {
      &-num {
        margin-right: .64rem;
        padding: .2rem;
        font-size: .66rem;
        color: #fff;
        background-color: #ff850b;
        border-radius: .2rem;
        &.true {
          background-color: #17cff8;
        }
      }
      &-inner {
        width: 19.12rem;
        font-size: .88rem;
        height: 2.75rem;
        color: #4e4a5e;
        padding-right: .72rem;
        border-bottom: .03rem #e8e8e8 solid;
        &.active {
          color: #ff850b;
        }
        &.ending {
          color: #b5b5b5;
        }
        .name {
          max-width: 85%;
        }
      }
    }

    .text-detail {
      padding: .5rem 0 .25rem;
      color: #fff;
    }

    .book {
      margin-right: .75rem;
      width: 5rem;
      border-radius: .3rem;
    }

    .page-book-detail {
      padding: 1.28rem .94rem;
      .df-title {
        font-size: 1rem;
        color: #222;
      }
      .remark {
        margin: .76rem 0 1.6rem;
        font-size: .75rem;
        line-height: 1.13rem;
        color: #989898;
      }
      .recommend-list {
        margin: .94rem 0 1.88rem;
        > :not(:last-child) {
          margin-bottom: 1rem;
        }
      }
    }
  }
</style>
